web-animations-js
Advanced tools
The web-animations-js package is a polyfill for the Web Animations API, which allows developers to create complex animations using JavaScript. It provides a unified way to animate DOM elements, offering control over timing, keyframes, and playback. This package is particularly useful for ensuring compatibility with browsers that do not fully support the Web Animations API.
Basic Animation
This feature allows you to create a basic animation that moves an element 100 pixels to the right over a duration of 1 second, repeating infinitely.
document.getElementById('element').animate([{ transform: 'translateX(0px)' }, { transform: 'translateX(100px)' }], { duration: 1000, iterations: Infinity });Keyframe Animations
This feature allows you to define keyframe animations, where an element's opacity changes from 0 to 1 and back to 0 over a duration of 2 seconds.
document.getElementById('element').animate([{ opacity: 0 }, { opacity: 1 }, { opacity: 0 }], { duration: 2000, iterations: 1 });Easing Functions
This feature allows you to apply easing functions to animations, making them start and end more smoothly. In this example, the element scales up to 1.5 times its size over 0.5 seconds with an 'ease-in-out' effect.
document.getElementById('element').animate([{ transform: 'scale(1)' }, { transform: 'scale(1.5)' }], { duration: 500, easing: 'ease-in-out' });Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It supports CSS properties, SVG, DOM attributes, and JavaScript objects. Compared to web-animations-js, Anime.js offers more advanced features like timeline control and staggering animations.
GSAP (GreenSock Animation Platform) is a robust JavaScript library for high-performance animations. It provides a rich set of features including timeline management, complex easing, and plugins for various types of animations. GSAP is more feature-rich and performant compared to web-animations-js, making it suitable for more complex animation needs.
Velocity.js is an animation engine that combines the best of jQuery and CSS transitions. It offers high performance and a simple API for creating animations. While web-animations-js focuses on providing a polyfill for the Web Animations API, Velocity.js is designed for performance and ease of use, making it a good alternative for creating smooth animations.
A new JavaScript API for driving animated content on the web. By unifying the animation features of SVG and CSS, Web Animations unlocks features previously only usable declaratively, and exposes powerful, high-performance animation capabilities to developers.
A JavaScript implementation of the Web Animations API that provides Web Animation features in browsers that do not support it natively. The polyfill falls back to the native implementation when one is available.
Here's a simple example of an animation that fades and scales a <div>.
Try it as a live demo.
<!-- Include the polyfill -->
<script src="web-animations.min.js"></script>
<!-- Set up a target to animate -->
<div class="pulse" style="width: 150px;">Hello world!</div>
<!-- Animate! -->
<script>
var elem = document.querySelector('.pulse');
var animation = elem.animate({
opacity: [0.5, 1],
transform: ['scale(0.5)', 'scale(1)'],
}, {
direction: 'alternate',
duration: 500,
iterations: Infinity,
});
</script>
For feedback on the API and the specification:
For issues with the polyfill, report them on GitHub: https://github.com/web-animations/web-animations-js/issues/new.
Breaking polyfill changes will be announced on this low-volume mailing list: web-animations-changes@googlegroups.com.
FAQs
JavaScript implementation of the Web Animations API
We found that web-animations-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.